<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sharePage</title>
    <link rel="stylesheet" href="static/sharePage.css" />
  </head>
  <body>
    <header>
      <img src="static/images/left.png" alt="" />
      <h1>Invite friends</h1>
    </header>
    <main>
      <div class="card_h">
        <img src="static/images/topnove.png" alt="" />
        <span class="card_t">TopNovel</span>
        <a class="card_b">Get the App</a>
      </div>
      <div class="card_info">
        <div class="card_info_l"><img src="" alt="" /></div>
        <div class="card_info_r">
          <p>My Perfect Female Boss</p>
          <ul>
            <li class="mar col3"><span>Reading</span><span>Subscribe</span></li>
            <li class="mar col0"><span>81.56K</span><span>81.56K</span></li>
            <li class="col3">Invite Code</li>
            <li class="col4">
              <span class="ic yqm">85BZ9</span><i class="copy" onclick="copyInviteCode()"><img src="static/images/copy.png" alt="" /></i>
            </li>
          </ul>
        </div>
      </div>
      <p class="copied" style="display: none">Invitation code copied</p>
    </main>

    <section class="synopsis">
      <h3>Synopsis</h3>
      <p>Ten years ago, the entire family was killed, and only he survived. Ten years later, he possessed world-class medical skills and peerless martial arts. Back in the city, the power of divine …Ten years ago, the entire family was killed, and only he survived. Ten years later, he possessed world-class medical skills and peerless martial arts. Back in the city, the power of divine …</p>
      <div class="show">
        <span class="top"><img src="static/images/top.png" alt="" /></span>
        <span class="fall"><img src="static/images/top.png" alt="" /></span>
      </div>
    </section>
    <div class="tag"><span>Romance</span><span>Royal Family</span><span>Rebirth</span><span>Doctor</span></div>

    <section class="synopsis2">
      <h3>Chapter 1</h3>
      <p>Elvina memegang telepon genggam, wajahnya yang pucat menjadi sedikit merah, setelah sakit sekian lama sekarang dia sudah membaik. Malam ini, dia memutuskan, akan memberikan pertama kalinya kepada tunangannya, Andreas Herman. Andreas dari dulu terus meminta Elvina memberikan pertama kalinya kepada dia, tapi Elvina ingin menjaga sampai pada malam pengantin, jadi dia terus menolak permintaan tunangannya itu. Selama Elvina sakit, Andreas masih setia, merawat dia, membuat Elvina terharu, tidak tahu harus bagaimana membalas kebaikan Andreas, sampai pada akhirnya dia bersedia untuk menerima permintaan tunangannya itu. Telepon sudah tersambung, Andreasddddddd</p>
    </section>

    <a href="" class="down">Download the App to read more</a>
  </body>
  <script>
    function init() {
      var width = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = width / 7.5 + "px";
    }
    init();
    window.addEventListener("orientationchange", init);
    window.addEventListener("resize", init);

    document.addEventListener("DOMContentLoaded", function () {
      const pTag = document.querySelector(".synopsis p");
      const topBtn = document.querySelector(".synopsis .top");
      const fallBtn = document.querySelector(".synopsis .fall");
      const showBg = document.querySelector(".show");
      console.log(pTag.offsetHeight);
      if (pTag.offsetHeight > 85) {
        pTag.style.height = "85px";
        topBtn.style.display = "block";
        fallBtn.style.display = "none";
      } else {
        topBtn.style.display = "none";
        fallBtn.style.display = "none";
      }

      topBtn.addEventListener("click", function () {
        pTag.style.height = "auto";
        topBtn.style.display = "none";
        fallBtn.style.display = "block";
        showBg.style.background = "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)";
      });

      fallBtn.addEventListener("click", function () {
        pTag.style.height = "85px";
        topBtn.style.display = "block";
        fallBtn.style.display = "none";
        showBg.style.background = "linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #ffffff 100%)";
      });
    });

    //邀请码复制
    function copyInviteCode() {
      var inviteCode = document.querySelector(".yqm");
      var tempInput = document.createElement("input");
      var copied = document.querySelector(".copied");
      tempInput.value = inviteCode.textContent;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);

      copied.style.display = "block";
      setTimeout(function () {
        copied.style.display = "none";
      }, 1000);
    }
  </script>
</html>
